<!--
 * @Descripttion: 大二一名学习前端开发的计科学生，缓慢成长中！
 * @emial: 2392862431@qq.com
 * @Author: SummerSofts
 * @Date: 2023-08-08 11:29:47
 * @LastEditors: SummerSofts
 * @LastEditTime: 2023-08-12 21:00:26
-->
<template>
  <div class="app">
    <div class="topNav">
         <div class="leftLogo">
             <img src="../src/assets/icon/2.png" alt="">
             <div class="title">WarmHeartUI</div>
         </div>
         <div class="showRoute">
             <router-link to="/button" active-class="active">首页</router-link>
             <router-link to="/introduction" active-class="active">介绍</router-link>
         </div>
    </div>
    <router-view></router-view>
  </div>
</template>


<script setup>
import { ref, reactive, onMounted } from "vue"
import { useRoute, useRouter } from "vue-router"
</script>


<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
@import '../node_modules/warmheart-design/dist/style.css';

.app {
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  .topNav {
    width: 100%;
    height: 8vh;
    display: flex;
    line-height: 8vh;
    background-color: rgb(235, 235, 235);
    .leftLogo{
       width: 20%;
       height: 80%;
       display: flex;
       margin-left: 5%;
       img{
        width: 5vw;
        height: 4vw;
        margin-right: 10px;
       }
       .title{
          font-family: 'Yomogi';
          font-size: 24px;
          font-weight: bolder;
       }
    }
    .showRoute{
       width: 10%;
       height: 80%;
       margin: auto 0;
       margin-left: 50%;
       display: flex;
       flex-direction: row;
       justify-content: space-around;
       a{
        display: inline-block;
        width:80px;
        height: 100%;
        list-style: none;
        text-decoration: none;
        color: black;
        text-align: center;
        line-height: 60px;
       }
       a:hover{
        color: rgb(238, 21, 21);
       }
       .active{
        border-bottom: 3px solid rgba(245, 26, 11, 0.911);
       }
    }

  }
}
</style>
